<template>
  <el-dialog v-model="showDialog" title="地址管理" width="30%" center>
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="createAddress()">新增地址</el-button>
    </div>

    <div class="addressWrapper">
      <div class="text item" :class="{ active: activeAddress.id === item.id }" @click="switchAddress(item)"
        v-for="item in userAddresses" :key="item.id">
        <ul>
          <li>
            <span>收<i />货<i />人：</span>{{ item.receiver }}
          </li>
          <li><span>联系方式：</span>{{ item.contact }}</li>
          <li><span>收货地址：</span>{{ item.address }}</li>
          <el-button type="primary" @click="editAddress(item)">编辑</el-button>
          <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消"
            @confirm="deleAddress(item.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </ul>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 地址组件 -->
  <AddressComponent ref="addressComponent" @success="onSuccess"/>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { getAddressAPI, setDefaultAddressAPI, deleAddressAPI } from "@/apis/address";
import AddressComponent from "@/components/Address/AddressComponent.vue";

// 响应式数据
const showDialog = ref(false); // 控制弹窗显示
const userAddresses = ref([]); // 用户地址列表
const activeAddress = ref({}); // 当前选中的地址
const addressComponent = ref(null); // 引用 AddressComponent

// 事件定义
const emit = defineEmits(["success"]);

// 添加地址
const createAddress = async () => {
  addressComponent.value.open();
};

// 编辑地址
const editAddress = async (row) => {
  addressComponent.value.open(row);
};

// 删除地址
const deleAddress = async (id) => {
  const res = await deleAddressAPI(id);
  if (res.code == 1) {
    ElMessage.success("删除成功");
    const res = await getAddressAPI();
    userAddresses.value = res.data;
  }
};

const onSuccess = async () => {
  const res = await getAddressAPI();
  userAddresses.value = res.data;
};

// 切换地址
const switchAddress = (item) => {
  activeAddress.value = item;
};

// 确认地址
const confirm = async () => {
  const res = await setDefaultAddressAPI(activeAddress.value.id);
  if (res.code == 1) {
  showDialog.value = false;
  emit("success", activeAddress.value);
  ElMessage.success("切换成功");
  activeAddress.value = {};
  }
};

// 打开弹窗并获取地址列表
const open = async () => {
  const res = await getAddressAPI();
  userAddresses.value = res.data;
  showDialog.value = true;
};

// 暴露方法给父组件
defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.addressWrapper {
  max-height: 500px;
  overflow-y: auto;
}

.text {
  flex: 1;
  min-height: 90px;
  display: flex;
  align-items: center;

  &.item {
    border: 1px solid #f5f5f5;
    margin-bottom: 10px;
    cursor: pointer;

    &.active,
    &:hover {
      border-color: $xtxColor;
      background: lighten($xtxColor, 50%);
    }

    >ul {
      padding: 10px;
      font-size: 14px;
      line-height: 30px;
    }
  }
}
</style>